<template>
  <div class="service-config-wrapper">
    <div class="todo-item-box">
      <div class="todo-item">
        <div class="todo-header"> 芝麻免押租车押金 </div>
        <div class="todo-body">
          <div class="body-item">
            芝麻免押授权成功后，最长可冻结
            <span class="num">{{ info.carFreezeDays }}</span>
            天。
          </div>
          <div class="body-item">
            订单还车成功后是否自动执行租车转违章
            <span class="num">{{ info.carTransferViolationTypeName }}</span
            >。
          </div>
          <div class="body-item" v-if="info.carTransferViolationType == 1">
            还车成功后
            <span class="num">{{ info.carTransferViolationTime }}</span>
            分钟自动转为违章押金。
          </div>
          <div class="body-item">
            达到预计解冻时间是否自动解冻
            <span class="num">{{ info.carUnfreezeTypeName }}</span
            >。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 芝麻免押违章押金 </div>
        <div class="todo-body">
          <div class="body-item">
            转违章押金成功后，违章押金冻结
            <span class="num">{{ info.violationFreezeDays }}</span>
            天。
          </div>
          <div class="body-item">
            到达违章押金的预计解冻日期是否自动解冻
            <span class="num">{{ info.violationUnfreezeTypeName }}</span
            >。
          </div>
          <div class="body-item" v-if="info.violationUnfreezeType == 1">
            到达预计解冻时间后
            <span class="num">{{ info.violationUnfreezeTime }}</span>
            小时自动解冻。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 订单取消 </div>
        <div class="todo-body">
          <div class="body-item">
            订单取消成功后，冻结押金是否自动解冻
            <span class="num">{{ info.orderCancelUnfreezeTypeName }}</span
            >。
          </div>
          <div class="body-item" v-if="info.orderCancelUnfreezeType == 1">
            取消成功后
            <span class="num">{{ info.orderCancelUnfreezeTime }}</span>
            分钟自动解冻。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 订单作废 </div>
        <div class="todo-body">
          <div class="body-item">
            订单作废成功后，冻结押金是否自动解冻
            <span class="num">{{ info.orderDeleteUnfreezeTypeName }}</span
            >。
          </div>
          <div class="body-item" v-if="info.orderDeleteUnfreezeType == 1">
            作废成功后
            <span class="num">{{ info.orderDeleteUnfreezeTime }}</span>
            分钟自动解冻。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  defineProps({
    info: {
      type: Object,
      default: () => ({}),
    },
  })
</script>

<style lang="less" scoped>
  .service-config-wrapper {
    padding: 0 20px;
    .todo-item-box {
      .todo-item {
        .todo-header {
          font-size: 14px;
          font-weight: 600;
          color: #1d2129;
        }
        .todo-body {
          width: 100%;
          background: rgba(247, 248, 250, 0.5);
          padding: 20px 20px;
          margin-top: 8px;

          .body-item {
            margin-bottom: 12px;
            &:last-child {
              margin-bottom: 0;
            }
          }

          .num {
            color: #1890ff;
            font-weight: 600;
          }
        }
      }
    }
  }
  .gray {
    color: #4e5969;
  }
  .ml16 {
    margin-left: 14px;
  }
</style>
